<template>
  <div class="app">
    <div class="logo-wrapper"></div>
    <div class="game-list">
      <div
        class="game-item"
        v-for="item in state.list"
        :key="item.id"
        @click="onGameItemClick(item)"
      >
        <van-image
          fit="cover"
          :radius="5"
          :src="parseGameIconPath(item.path, item.icon)"
        />
        <span class="game-text">{{ item.name }}</span>
        <!-- <span class="game-play">Play</span> -->
        <van-button
          size="mini"
          class="game-play"
          color="linear-gradient(to right, #fe9232, #fe661b)"
        >
          Play
        </van-button>
      </div>
      <div class="view-more">
        <van-button color="#FFD200" block>View More</van-button>
      </div>
    </div>
    <!-- color="#FFD200" -->

    <GamePanel
      v-if="state.open"
      :path="state.path"
      :name="state.name"
      @close="onGamePanleClose"
    ></GamePanel>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import GamePanel from './components/GamePanel.vue';
import axios from 'axios';

const parseGameIconPath = (name, icon) => {
  const url = new URL(`./assets/games/${name}/${icon}`, import.meta.url);
  return url.href;
};

const parseGameItemPath = (name) => {
  const url = new URL(`./assets/games/${name}/index.html`, import.meta.url);
  return url.href;
};

const state = reactive({
  open: false,
  path: '',
  name: '',
  list: [],
  total: '',
});

const onGameItemClick = (item) => {
  console.log('item', item);
  state.path = item.path;
  state.name = item.name;
  state.open = true;
};

const fetchGamesData = () => {
  const timeStamp = new Date().getTime();
  const url = `/src/config/data.json?t=${timeStamp}`;
  axios
    .get(url, {
      headers: {
        'Content-Type': 'application/json',
        Accept: 'application/json',
      },
    })
    .then((res) => {
      if (res.status === 200) {
        const { content, total } = res.data;
        state.list = content;
        state.total = total;
      }
    });
};
fetchGamesData();

const onGamePanleClose = () => {
  state.open = false;
};
</script>

<style lang="less" scoped>
.app {
  width: 100vw;
  height: 100vh;
  position: relative;
  font-size: 10px;
  background: #ff7925;
  // color: #bfdbef;
  background-size: 100% auto;
  background-image: url('@/assets/images/bg.png');
  background-repeat: no-repeat;
  .logo-wrapper {
    height: 20vh;
  }

  .game-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 0 8px;
    gap: 8px;
    height: 80vh;
    overflow-y: auto;

    .game-item {
      box-sizing: border-box;
      padding: 6px;
      position: relative;
      border-radius: 2px;
      background: rgb(255, 236, 218);
      box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
      text-align: center;
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .game-text {
        display: inline-block;
        overflow: hidden;
        margin: 4px 0;
      }
      .game-play {
        display: inline-block;
        padding: 0px 10px;
        height: 18px;
        text-align: center;
      }
    }
    .view-more {
      grid-column: span 4;
      display: inline-flex;
      justify-content: center;
      margin: 16px 0;
    }
  }
}
</style>
